<template>
	<view>
		<view v-if="loading" class="page-loading"><u-loading mode="circle"></u-loading></view>
		<!-- 主要内容 -->
		<view v-else class="page-main">
			<!-- 头部 -->
			<view class="grid-box">
				<view class="u-p-b-20 u-flex">
					<view class="u-flex-1">
						<view class="u-flex">
							<text class="u-font-32 u-p-r-20 u-flex-1">{{form.name}}</text>
							<u-button v-if="isOperatorAdmin" type="primary" size="mini" @click="showWindow = true"><u-icon name="edit-pen-fill"></u-icon>编辑</u-button>
						</view>
						<view class="u-p-t-8">
							<view class="u-flex u-font-24">
								<text class="u-font-24 u-tips-color">账户管理模式：{{form.paymode}}</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 可用余额 -->
				<view class="u-border-top u-p-t-15 u-m-t-15" v-if="isOperatorAdmin">
					<view class="u-text-left">
						<view class="u-m-t-20 u-m-b-20 u-flex">
							<text class="u-tips-color u-flex-1">可用余额（元）</text>
							<u-button type="primary" size="mini" @click="goView('/pages/admin/franchise/balance/create/create?id='+id)">充值</u-button>
							<u-button type="warning" size="mini" plain class="u-m-l-30" @click="goView('/pages/admin/franchise/balance/balance?franchiseId='+id)">明细</u-button>
						</view>
						<view>
							<text class="u-font-24">￥</text>
							<text class="balance bold u-font-60">{{utils.formatMoney(form.balance)}}</text>
							<!-- <text class="links u-font-24 u-m-l-30" @click="goView('/pages/shop/my/balance/balance')"><u-icon name="photo"></u-icon>查看记录</text> -->
							<!-- <u-icon 
								:name="showBalance ? 'eye-fill' : 'eye'" 
								size="36" 
								class="u-m-l-30 links"
								@click="toggleBalance"
								>
							</u-icon> -->
						</view>
						<view>
							
						</view>
					</view>
				</view>
			</view>
			
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#10beca" ref="tabs"
					:list="list" :current="current" @change="change" :is-scroll="false" swiperWidth="750">
				</u-tabs-swiper>
			</view>
			<view v-if="current == 0" class="u-border-top">
				<franchiseStaff ref="franchiseStaff" :sendFranchiseId="id"></franchiseStaff>
			</view>
			<view v-if="current == 1" class="u-border-top">
				<storeList ref="storeList" :sendFranchiseId="id"></storeList>
			</view>
			<view v-if="current == 2" class="u-border-top">
				<enterpriseList :sendFranchiseId="id"></enterpriseList>
			</view>
			<view v-if="current == 3" class="u-border-top">
				<manufacturerList :sendFranchiseId="id"></manufacturerList>
			</view>
		</view>
		<!-- 修改信息 -->
		<u-modal
			v-model="showWindow" 
			:show-cancel-button="true" 
			:negative-top="200" 
			title="编辑" 
			ref="uModal" 
			:async-close="true"
			@confirm="confirmEdit"
			@cancel="cancelStaff">
			<scroll-view :scroll-y="true" class="slot-content">
				<view class="u-p-l-30 u-p-r-30 u-p-t-30">
					<u-form label-width="180rpx">
						<u-form-item label="名称" required>
							<u-input placeholder="请输入名称" type="text" border v-model="editForm.name" />
						</u-form-item>
						<!-- <u-form-item label="选择员工" class="u-p-0" required>
							<view class="input-text u-flex u-m-l-0" @click="show = true;">
								<text>{{editForm.staffname || '点击选择员工'}}</text>
								<view class="u-flex-1"></view>
								<u-icon name="arrow-right" class="tips-txt"></u-icon>
							</view>
							<staff-list v-model="show" @confirm="confirmStaff" @close="show = false"></staff-list>
						</u-form-item> -->
						<u-form-item label="账号管理模式">
							<u-radio-group v-model="editForm.paymode">
								<u-radio name="预存模式">预存模式</u-radio>
								<u-radio name="后付模式">后付模式</u-radio>
								<u-radio name="禁用">禁用线上结算</u-radio>
							</u-radio-group>
						</u-form-item>
					</u-form>
				</view>
			</scroll-view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions
	} from 'vuex';
	import franchiseStaff from 'pages/admin/franchise/staff/staff'
	import storeList from 'pages/admin/store/store'
	import enterpriseList from 'pages/admin/franchise/enterprise/enterprise.vue'
	import manufacturerList from 'pages/admin/franchise/manufacturer/manufacturer.vue'
	// import staffList from '@/components/form-select-type/staff-list.vue'
	export default {
		components:{
			// staffList,
			franchiseStaff,
			storeList,
			enterpriseList,
			manufacturerList
		},
		data() {
			return {
				loading: true,
				id: 0,
				form:{
					
				},
				editForm: {
					id: 0,
					name: "",
					// staffname: "",
					// manager: null,
					paymode: 2
				},
				// show: false,
				showWindow: false,
				list: [
					{
						value: 0,
						name: '管理员'
					},
					{
						value: 1,
						name: '站点管理'
					},
					{
						value: 2,
						name: '客户组'
					},
					{
						value: 3,
						name: '后端厂商'
					}
				],
				current: 0,
			}
		},
		computed: {
			...mapState({
				userdetail: state => state.userdetail,
				storeId: state => state.storeId,
				franchiseId: state => state.franchiseId,
				operatorId: state => state.operatorid
			}),
			// 是否运营商管理员
			isOperatorAdmin(){
				return this.userdetail.bindinfo.operator.ismanager
			},
			// 是否加盟商管理员
			isFranchiseAdmin(){
				return this.userdetail.bindinfo.operator.franchiselist.find((item)=>item.id == this.franchiseId).ismanager
			},
			// 是否（当前）站点的管理员
			isStoreAdmin(){
				return this.userdetail.bindinfo.operator.franchiselist.find((item)=>item.id == this.franchiseId).storelist.find((item)=>item.id == this.storeId).ismanager
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getDetails()
		},
		onShow() {
			if(this.id > 0){
				this.getDetails()
			}
		},
		onReachBottom(e) {
			// this.$refs.storeList.reachBottom()
			switch (this.current){
				case 0:
					this.$refs.franchiseStaff.reachBottom()
					break;
				case 1:
					this.$refs.storeList.reachBottom()
					break;
				default:
					break;
			}
		},
		methods: {
			goView(url){
				uni.navigateTo({
					url:url
				})
			},
			getDetails(){
				this.loading = true
				this.$u.get('/Franchise/Detail?id=' + this.id).then((res) => {
					this.form = res
					this.editForm.name = res.name
					this.editForm.id = res.id
					this.editForm.paymode = res.paymode
				}).finally(() => {
					this.loading = false
				})
			},
			// tab栏切换
			change(index) {
				this.current = index;
			},
			// confirmStaff(item) {
			// 	console.log(item)
			// 	this.editForm.staffname = item.name
			// 	this.editForm.manager = item.id
			// },
			// 添加店员
			confirmEdit(){
				this.$u.post('/Franchise/Edit', {
					id: this.id,
					name: this.editForm.name,
					paymode: this.editForm.paymode
				}).then((res) => {
					// uni.showModal({
					// 	content: '操作成功',
					// 	showCancel: false,
					// 	success: (res)=> {
					// 		if (res.confirm) {
					// 			uni.navigateBack()
					// 		}
					// 	}
					// });
					uni.showToast({
						title: '操作成功'
					})
					this.showWindow = false
					this.getDetails()
				}).catch(()=>{
					this.$refs.uModal.clearLoading();
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.grid-box{
		margin: 0;
		border-radius: 0;
	}

</style>
